﻿<template>
      <!--1、基本信息-->
        <v-flex style="margin-left:50px;">
          <v-form v-model="valid" ref="basic">
            <v-layout row>
              <v-flex xs10>
                <!--歌单名称-----------------------------要写------------------------->
                <v-text-field label="歌曲名称" v-model="songListForm.title"  required :rules="[v => !!v || '歌曲名称不能为空']" hide-details/>
              </v-flex>
            </v-layout>
            <v-layout row>
            <v-flex xs10>
              <!--选择歌单风格-----------------------------要写------------------------->
              <v-cascader
                      url="/category/of/parent"
                      multiple
                      required
                      v-model="songListForm.categories"
                      label="歌单分类"/>
            </v-flex>
            </v-layout>
            <v-layout row>
              <div>
              </div>
              <v-flex xs10>
                <div style="margin-top: 20px;"></div>
                <v-label>内容</v-label>
                <el-input
                        type="textarea"
                        style=""
                        placeholder="请输入内容"
                        v-model="songListForm.introduce"
                        show-word-limit
                        size="medium"
                        :autosize="{ minRows: 3, maxRows: 3}"
                >
                </el-input>
              </v-flex>
            </v-layout>
            <v-layout row>
              <v-flex>
                <div style="margin-top: 30px;"></div>
                <div>
                  <v-label>上传歌单封面</v-label>
                  <v-upload v-model="songListForm.picture" :isAudio="false" :pic-width="320" :pic-height="180"
                            needSignature url="/signature?type=image"/>
                </div>
              </v-flex>
            </v-layout>
            <v-layout row>
              <v-flex class="xs3  " mx-auto>
                <div style="margin-top: 30px;"></div>
                <div>
                  <v-btn block @click="submit"  color="info">保存</v-btn>
                </div>
              </v-flex>
            </v-layout>
          </v-form>
        </v-flex>
</template>

<script>
export default {
  name: "songList-form",
  props: {
    oldSongList: {
      type: Object
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      valid: false,
      songListForm: {}
    };
  },
  methods: {
    submit() {
      if(!this.$refs.basic.validate){
        this.$message.error("请先完成表单内容！");
      }
      const {categories,...params} = this.songListForm
      params.cids = categories.map(c=>c.id).join(",")

      this.$http({
        method: this.isEdit?'put':'post',
        url: "/songlist/saveSongList",
        data: this.$qs.stringify(params)
      }).then(() => {
        //成功，关闭窗口
        this.$emit("close");

        this.$message.success("保存成功")
      }).catch(error=>{
        console.log(error)
        this.$message.error("保存失败！");
      })
    }
  },
  watch: {
    oldSongList: {
      deep: true,
      handler() {
        // this.$emit("changeSongList", this.songListForm)
        console.log(this.oldSongList)
        this.songListForm = this.oldSongList
      }
    },
    "oldSongList.categories": {
      deep: true,
      handler() {
        this.$emit("changeSongList", this.songListForm)
      }
    }
  }
}
</script>

<style scoped>
</style>
